<!DOCTYPE html>
<html>
<head>
<title>标题</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="/Css/bootstrap.css" />
	<link rel="stylesheet" type="text/css" href="/Css/bootstrap-responsive.css" />
	<link rel="stylesheet" type="text/css" href="/Css/style.css" />
	<script type="text/javascript" src="/bui/assets/js/jquery-1.8.1.min.js"></script>
	<script type="text/javascript" src="/highcharts/highcharts.js"></script>
</head>
<body>
	<table class="table table-bordered table-hover definewidth m10">
		<thead>
			<tr >
				<th width="50%">
					<input size="100" id="studyContent" disabled="disabled"/>
					<button class="btn btn-primary" id="saveBtn" style="display: none;" onclick="save()">开始学习</button>
					<button class="btn btn-primary" id="finishBtn" style="display: none;" onclick="finish()">完成任务</button>
					<input id="studyId" type="hidden"/>
					<span id="run_time"></span>
				</th>
			</tr>
		</thead>
	</table>
	
	<div th:include="my/studyFragment1 :: chart"></div>
	
	<table class="table table-bordered table-hover definewidth m10">
		<thead>
			<tr >
				<th width="10%">序号</th>
				<th width="10%">日期</th>
				<th width="10%">开始时间</th>
				<th width="10%">结束时间</th>
				<th width="10%">学习时长</th>
				<th width="10%">状态</th>
				<th width="20%">内容</th>
			</tr>
		</thead>
		<tr th:each="study,iterStat : ${studies}" >
			<td style="vertical-align: middle;" th:text="${iterStat.count}"></td>
			<td style="vertical-align: middle;" th:text="${#dates.format(study.studyDate, 'yyyy-MM-dd')}"></td>
			<td style="vertical-align: middle;" th:text="${#dates.format(study.beginTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
			<td style="vertical-align: middle;" th:text="${#dates.format(study.endTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
			<td style="vertical-align: middle;" th:text="${study.studyTimeStr}"></td>
			<td style="vertical-align: middle;" th:text="${study.studyStatusStr}"></td>
			<td style="vertical-align: middle;" th:text="${study.studyContent}"></td>
			
		</tr>
	</table>
	
	<script type="text/javascript">
	$(function(){
		studyStatus();
	})
	
	function finish(){
		var studyId = $('#studyId').val();
		if(!confirm("确认要完成吗?")) {
			return;
		}
		$.ajax({
			url:"/my/finish",
			type:"post",
			dataType:"json",
			data : {"studyId":studyId},
			success: function(reponse){
				if(reponse.code == 200) {
					window.location.reload();
				} else {
					exception();
				}
			},
			error:function(){
				alert("save异常");
			}
		});
	}
	
	function save(){
		var studyContent = $('#studyContent').val();
		if(!studyContent) {
			alert("必须填写学习内容");
			return;
		}
		if(!confirm("准备好开始学习了吗?")) {
			return;
		}
		
		$.ajax({
			url:"/my/save",
			type:"post",
			dataType:"json",
			data : {"studyContent":studyContent},
			cache:false,
			async: false,
			success: function(reponse){
				if(reponse.code == 200) {
					window.location.reload();
				} else {
					exception();
				}
			},
			error:function(){
				alert("save异常");
			}
		});
	}

	function studyStatus(){
		$.ajax({
			url:"/my/status",
			type:"post",
			dataType:"json",
			success: function(reponse){
				// 1. 有正在进行的任务
				if(reponse.code == 1) {
					var study = reponse.data;
					has(study);
				// 2. 没有任务
				} else if(reponse.code == 2) {
					none();
				// 3. 异常
				} else if(reponse.code == 3){
					exception();
				}
			},
			error:function(){
				alert("status异常");
			}
		});
	}
	// 保存一个当前正在进行任务的开始时间，用于实时结算
	var begin = null;	
	// 当前有执行的任务
	function has(study){
		$('#studyContent').val(study.studyContent);
		$('#studyContent').prop("disabled", true);
		$('#studyId').val(study.id);
		$('#saveBtn').hide();
		$('#finishBtn').show();
		begin = new Date(study.beginTime);
		setInterval('studyTimer()',1000);
	}
	// 当前没有执行的任务
	function none(){
		$('#studyContent').val("");
		$('#studyContent').prop("disabled", false);
		$('#studyId').val("");
		$('#saveBtn').show();
		$('#finishBtn').hide();
		$('#run_time').text("");
	}
	// 出现异常了
	function exception(){
		$('#studyContent').val("");
		$('#studyContent').prop("disabled", true);
		$('#studyId').val("");
		$('#saveBtn').hide();
		$('#finishBtn').hide();
		$('#run_time').text("状态异常，可能存在多个正在进行的任务");
	}
	// 学习时间计时器
	function studyTimer(){
		var beginTime = begin;
		var now = new Date();
		
		var studyTime = parseInt( (now.getTime() - beginTime.getTime()) / 1000 );
		var hour = parseInt(studyTime / (60 * 60) );
		var minute = parseInt((studyTime - hour * 60 * 60) / 60);
		var second = parseInt((studyTime - hour * 60 * 60 - minute * 60));
		
		var studyTimeStr = hour + ":" + minute + ":" + second;
		$('#run_time').text( studyTimeStr );
	}
	</script>
</body>
</html>

